<template>
	<view class="page">
		<view class="content padding-30 box-sizing">
			<up-tabs :scrollable="false" :list="tabs" @click="tabClick"></up-tabs>
			<view class="width-full height-50">
		
			</view>
			<view class="textBox marginTop-30" v-if="current == 0">
				<view class="title fontSize-28">
					<image class="imageBj" :src="list.first.pic" mode="aspectFit" ></image>
				</view>
				<view class="text fontSize-28 color-696969">
					  <span v-html="list.first.intro.replace(/ /g, '&nbsp;')"></span>
				</view>
		
			</view>
			<view class="textBox marginTop-30" v-if="current == 1">
				<view class="title fontSize-28">
					<image class="imageBj" :src="list.second.pic" mode="aspectFit" ></image>
				</view>
				<view class="text fontSize-28 color-696969">
					 <span v-html="list.second.intro.replace(/ /g, '&nbsp;')"></span>
				</view>
			
			</view>
		
		</view>
		<view class="width-full box-sizing btns flex items-center space-between padding-30 ">
				<up-button @click="toTrain" size="normal" type="primary" text="开始测试"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref,
		nextTick,
		inject
	} from 'vue'
	// data
	const tabs = ref([{
			name: '区找单词'
		},
		{
			name: '单词找区'
		},
	]);

	const list = ref({});
	const current = ref(0);
	const testIntroApi = inject('testIntro');
	// created


	onLoad(() => {
		testIntroApi({
		}).then(res => {
			console.log(res)
			list.value=res
		});
	});
	// methods
	const tabClick = (e) => {
		current.value = e.index
	}
	const toTrain = (e) => {
		if (current.value == 0) {
			uni.navigateTo({
				url: '/pages/index/test/blockFindingWords'
			})
		} else if (current.value == 1) {
			uni.navigateTo({
				url: '/pages/index/test/wordSearchArea'
			})
		}
	}
</script>

<style scoped lang="scss">
	.imageBox {
		width: 100%;
		height: 120rpx;

		image {
			border-radius: 8rpx;
			height: 100%;
			width: 100%;
		}
	}

	.textBox {
		.title {}

		.text {
			line-height: 50rpx;
		}
	}
</style>